<template>
  <div v-loading="loading" element-loading-text="加载中..." class="detail-main">
    <div class="top_app">
      <div class="top_h" v-if="orderDetail">
        <div class="text">
          <span class="module_color">{{ orderDetail.workNo }}</span>
          <span class="module_color">{{ orderDetail.module }}</span>
          <el-tag class="ml-8" type="warning" effect="light" v-if="orderDetail.status == 1"
            >待派单</el-tag
          >
          <el-tag
            class="ml-8"
            effect="dark"
            type="success"
            v-if="orderDetail.status == 3 || orderDetail.status == 2"
            >处理中</el-tag
          >
          <el-tag class="ml-8" effect="light" v-if="orderDetail.status == 4">已完成</el-tag>
          <el-tag class="ml-8" type="info" effect="light" v-if="orderDetail.status == 5"
            >已取消</el-tag
          >
          <el-tag class="ml-8" type="warning" effect="light" v-if="orderDetail.status == 50"
            >待结算</el-tag
          >
          <el-tag class="ml-8" type="danger" effect="light" v-if="orderDetail.reminder">催</el-tag>
          <span v-if="orderDetail.status != 4" :style="{ color: orderDetail.orderLevelColor }">{{
            orderDetail.orderLevel
          }}</span>
          <span class="ml-8" style="margin-left: 8px">{{
            orderDetail.allInclusiveFee ? '费用全包' : '包下单费'
          }}</span>
        </div>
        <div class="btns">
          <!-- <button class="btn btn-bg3 mr5" @click="assignHandel(1)" v-if="orderDetail.status == 1">分派客服</button> -->
          <!-- <button class="btn btn-bg3 mr5" @click="assignHandel(6)"
            v-else-if="orderDetail.status == 1 || orderDetail.status == 2 || orderDetail.status == 3">改派客服</button> -->
          <!-- <button class="btn btn-bg3 mr5" @click="assignHandel(2)" v-if="orderDetail.status == 1">分派服务商</button> -->
          <!-- <button class="btn btn-bg3 mr5" @click="assignHandel(7)"
            v-else-if="orderDetail.status == 2 || orderDetail.status ==3">改派服务商</button>
          <button class="btn btn-bg3 mr5" v-if="orderDetail.status == 3">确认费用</button> -->
          <!-- <button class="btn btn-bg5 mr5" @click="timeDialog = true" v-if="orderDetail.status == 3"><i
              class="fa fa-clock-o mr" aria-hidden="true" style="font-size: 14px;"></i>预约</button>
          <button class="btn btn-bg1 mr5" v-if="!(orderDetail.status == 4 || orderDetail.status == 5)"
            @click="assignHandel(3)"><span class="iconfont icon-wancheng mr"></span>完成</button> -->

          <button class="btn btn-bg4 mr5" v-if="orderDetail.status == 1" @click="assignHandel(4)"
            >取消</button
          >
          <!-- <button class="btn btn-bg5 mr5" @click="showRemark">填写备注</button> -->
          <button class="btn btn-bg5 mr5" @click="showRemark">服务过程</button>
          <button
            class="btn btn-bg5 mr5"
            v-if="!(orderDetail.status == 4 || orderDetail.status == 5)"
            @click="assignHandel(5)"
            >催单</button
          >
        </div>
      </div>
    </div>
    <el-row class="main_content">
      <el-col :span="18 + spanSix" class="main_left">
        <div class="mark_bg">
          <div class="mark_content">
            <div class="info_order">
              <div class="content_inner" style="padding: 12px" v-if="orderDetail">
                <h4 class="title_bl">客户信息</h4>
                <el-form label-width="auto" :model="orderDetail" class="basic_information">
                  <el-form-item label="客户名称:">
                    <!-- <span class="ml text-color" @click="customerClickShow">{{ orderDetail.username }}</span> -->
                    <span class="ml">{{ orderDetail.username }}</span>
                  </el-form-item>
                  <el-form-item label="联系人:">
                    <span class="ml">{{
                      orderDetail.username + ' ' + orderDetail.contactPhone
                    }}</span>
                  </el-form-item>
                  <el-form-item label="客户地址:">
                    <span class="ml nowrap">{{
                      orderDetail.province +
                      orderDetail.city +
                      orderDetail.area +
                      orderDetail.town +
                      orderDetail.address
                    }}</span>
                  </el-form-item>
                </el-form>
              </div>
              <div
                class="content_inner"
                style="margin-left: 12px; padding: 12px"
                v-if="orderDetail"
              >
                <!-- 基本信息 -->
                <h4 class="title_bl">基本信息</h4>
                <el-form label-width="auto" :model="orderDetail" class="basic_information">
                  <el-row>
                    <el-col :lg="12" :sm="24">
                      <el-form-item label="报单人员:">
                        <span class="ml">{{ orderDetail.createEmp }}</span>
                      </el-form-item>
                      <el-form-item label="工单来源:">
                        <span class="ml">{{ sources[orderDetail.source - 1].title }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :lg="12" :sm="24">
                      <el-form-item label="报单时间:">
                        <span class="ml">{{ orderDetail.createTime }}</span>
                      </el-form-item>
                      <el-form-item label="完成时间:">
                        <span class="ml">{{ orderDetail.finishTime }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>

            <div class="content_inner" style="padding: 12px" v-if="orderDetail">
              <!-- 客户信息 -->
              <h4 class="title_bl">工单信息</h4>
              <el-form label-width="auto" :model="orderDetail" class="basic_information">
                <div>
                  <el-form-item label="描述:" label-width="40">
                    <span class="ml content_msg" style="width: 50%">
                      <ShowTooltip
                        placement="top"
                        refName="testName"
                        className="is_textClass_content"
                        :content="orderDetail.content"
                        :isText="true"
                        color="#000"
                        :size="12"
                        :offset="5"
                        :showAfter="300"
                      ></ShowTooltip>
                      <!-- {{ orderDetail.content }} -->
                    </span>
                  </el-form-item>
                  <el-form-item label="图片:" label-width="40">
                    <span>
                      <el-image
                        v-for="(img, index) in orderDetail.images"
                        :key="index"
                        :title="img.split('/')[img.split('/').length - 1]"
                        style="
                          width: 40px;
                          height: 40px;
                          margin: 0 5px 5px 0;
                          border: 1px solid #eee;
                        "
                        :src="img"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="orderDetail.images"
                        :initial-index="index"
                        fit="cover"
                    /></span>
                  </el-form-item>
                </div>
                <div style="">
                  <div class="fields_o" v-if="UnimgFielVo.length > 0">
                    <el-form-item
                      v-for="(item, bigindex) in UnimgFielVo"
                      :key="bigindex"
                      style="display: flex; margin-right: 24px; align-items: flex-start; width: 30%"
                      :label="`${item.name}:`"
                      label-width="auto"
                    >
                      <!-- 评分 -->
                      <div v-if="item.type == 8" style="display: flex; align-items: top">
                        <el-rate
                          style="height: 22px"
                          disabled
                          allow-half
                          :model-value="Number(item.val[0]) / 2"
                        />
                        <span>{{ Number(item.val[0]) }}</span>
                      </div>

                      <span
                        class="text_c"
                        v-else-if="
                          item.type === 1 || item.type === 2 || item.type === 3 || item.type === 4
                        "
                      >
                        <ShowTooltip
                          placement="top"
                          :refName="'testName' + bigindex"
                          className="is_textClass"
                          :content="item.val[0]?.toString() || ''"
                          :isText="true"
                          color="#000"
                          :size="12"
                          :offset="5"
                          :showAfter="300"
                        ></ShowTooltip>
                      </span>
                    </el-form-item>
                  </div>
                  <div class="fields_o" v-if="imgFielVo.length > 0">
                    <el-form-item
                      v-for="(item, bigindex) in imgFielVo"
                      :key="bigindex"
                      style="
                        display: flex;
                        margin-right: 24px;
                        align-items: flex-start;
                        width: 30%;
                        margin-bottom: 12px;
                      "
                      :label="`${item.name}:`"
                      label-width="auto"
                    >
                      <!-- 图片 -->
                      <div
                        class="upload_file"
                        v-if="item.type === 5 || item.type === 6 || item.type === 7"
                        :key="bigindex"
                      >
                        <div class="ul_list">
                          <div class="li_item" v-for="(file, index) in item.val" :key="index">
                            <div class="li_item_left">
                              <img
                                :src="pdf"
                                alt=""
                                :title="file.split('/')[file.split('/').length - 1]"
                                style="width: 30px; height: 30px; cursor: pointer"
                                @click.stop="lookFile(file, '附件')"
                                v-if="
                                  file.split('/')[file.split('/').length - 1].replace(/.+\./, '') ==
                                  'pdf'
                                "
                              />
                              <el-icon
                                style="cursor: pointer"
                                :title="file.split('/')[file.split('/').length - 1]"
                                v-else-if="
                                  /\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/.test(
                                    file.toLowerCase(),
                                  )
                                "
                                size="30"
                                @click.stop="lookFile(file, '视频')"
                              >
                                <Film />
                              </el-icon>
                              <el-image
                                v-else
                                :preview-src-list="[file]"
                                :title="file.split('/')[file.split('/').length - 1]"
                                style="width: 30px; height: 30px; border: 1px solid #eee"
                                :src="file"
                                fit="cover"
                              />
                              <!-- <span class="pic_name">{{ file.split('/')[file.split('/').length - 1] }}</span> -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
            <div class="content_inner" v-if="serviceDetail">
              <!-- 服务商信息 -->
              <h4 class="title_bl">服务商信息</h4>
              <el-form label-width="auto" :model="orderDetail" class="basic_information">
                <el-row>
                  <el-col :lg="6" :sm="12">
                    <el-form-item label="服务商名称:">
                      <span class="ml">{{ serviceDetail.network }}</span>
                    </el-form-item>
                    <el-form-item label="服务商负责人:">
                      <span class="ml"
                        >{{ serviceDetail.networkManaterEmp }} &nbsp;{{
                          serviceDetail.networkManaterPhone
                        }}</span
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :lg="6" :sm="12">
                    <el-form-item label="工程师名称:">
                      <span class="ml"
                        >{{ serviceDetail.engineerManagerEmp }}&nbsp;{{
                          serviceDetail.engineerManagerPhone
                        }}</span
                      >
                    </el-form-item>
                    <el-form-item label="协同人名称:">
                      <span class="ml">{{ serviceDetail.engineerCoordinator }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="12" :sm="24">
                    <el-form-item label="服务商地址:">
                      <span class="ml nowrap">{{ serviceDetail.networkAddress }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="settle-info">
              <OrderSettleInfo
                ref="orderSettleInfoInstance"
                :status="orderDetail ? orderDetail.status : 0"
              ></OrderSettleInfo>
            </div>
            <el-collapse v-model="activeTabs">
              <div class="content_inner">
                <el-collapse-item name="a">
                  <template #title>
                    <div>
                      <el-icon v-if="activeTabs.includes('a')"> <CaretBottom /> </el-icon
                      ><el-icon v-else>
                        <CaretRight />
                      </el-icon>
                      <span>商品信息</span>
                    </div>
                  </template>
                  <el-table
                    :border="true"
                    :data="goodsList.rows"
                    resizable
                    stripe
                    max-height="22vh"
                    :header-cell-style="tableHeaderCellStyle"
                  >
                    <!-- <template #empty>
                      <el-empty description="暂无数据" :image-size="40" />
                    </template> -->
                    <el-table-column label="序号" width="100">
                      <template v-slot="item">
                        <div class="ord_dis">
                          <span> {{ item.$index + 1 }} </span>
                          <img
                            src="../../../../assets/image/zhanpai.png"
                            class="img"
                            @click="showDrawer(item.row)"
                          />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="codes"
                      show-overflow-tooltip
                      label="一物一码"
                      width="150"
                    />
                    <el-table-column prop="pro" width="150" show-overflow-tooltip label="商品信息">
                      <template v-slot="i">
                        {{ i.row.goodsBrand }}&nbsp;{{ i.row.goodsName }}&nbsp;{{ i.row.goodsSpec }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="qty" show-overflow-tooltip label="数量" width="60" />
                    <el-table-column
                      prop="buyTime"
                      show-overflow-tooltip
                      label="购买时间"
                      width="150"
                    />
                    <el-table-column
                      prop="endTime"
                      show-overflow-tooltip
                      label="质保到期"
                      width="150"
                    />
                    <el-table-column
                      prop="address"
                      show-overflow-tooltip
                      label="登记信息"
                      min-width="180"
                    >
                      <template v-slot="i">
                        {{ i.row.userName }}&nbsp;{{ i.row.userPhone }}&nbsp;{{
                          i.row.province + i.row.city + i.row.area + i.row.town + i.row.address
                        }}
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="pagination">
                    <Pagination
                      ref="pagination_goods"
                      :list_total="Number(goodsList.total)"
                      @size-change="getOrderGoodsDetailList"
                      @current-change="getOrderGoodsDetailList"
                    />
                  </div>
                </el-collapse-item>
              </div>
              <div class="content_inner" v-if="feeAuthoriObj?.enableAuthori">
                <el-collapse-item name="b">
                  <template #title>
                    <div>
                      <el-icon v-if="activeTabs.includes('b')"> <CaretBottom /> </el-icon
                      ><el-icon v-else>
                        <CaretRight />
                      </el-icon>
                      <span>服务费用</span>
                    </div>
                  </template>
                  <!-- <button class="btn btn-bg2 mb10" @click="checkDialogAdd = true" v-if="showAddServiceFeeWidthSpare">
                  <span class="iconfont icon-xinjian mr5"></span>
                  申请服务
                </button> -->
                  <el-table
                    :border="true"
                    resizable
                    max-height="22vh"
                    :data="costList.rows"
                    stripe
                    style="width: 100%"
                    :header-cell-style="tableHeaderCellStyle"
                  >
                    <!-- <template #empty>
                      <el-empty description="暂无数据" :image-size="40" />
                    </template> -->
                    <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
                      <template v-slot="i">
                        {{ i.$index + 1 }}
                      </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="100" fixed="left">
                      <template v-slot="item">
                        <div class="ord_dis">
                          <span class="waiting_x" v-if="item.row.status == 1" @click="viewCheck(item.row)">审核</span>
                          <span class="waiting_pass" v-else>审核</span>
                        </div>
                      </template>
                    </el-table-column> -->
                    <el-table-column
                      show-overflow-tooltip
                      fixed="left"
                      prop="feeNo"
                      label="费用单号"
                      min-width="160"
                    >
                      <!-- <template #default="scope">
                        <span class="number" @click="viewDetail(scope.row.id)">{{ scope.row.feeNo }}</span>
                      </template> -->
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="83">
                      <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
                        <el-tag v-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="warning" v-if="scope.row.status == 3">已驳回</el-tag>
                        <el-tag type="info" v-if="scope.row.status == 4">已撒回</el-tag>
                        <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="settlementType"
                      label="结算类型"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="feeProject"
                      label="项目费用名称"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="receiveFactoryTotalPrice"
                      label="商家承担费用"
                      width="100"
                    >
                      <template v-slot="i">
                        ￥{{ (i.row.receiveFactoryTotalPrice || 0).toFixed(2) }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="applyEmp"
                      label="申请人员"
                      width="120"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="reviewEmp"
                      label="审核人员"
                      width="120"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="createTime"
                      label="申请时间"
                      width="150"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="reviewTime"
                      label="	审核时间"
                      width="150"
                    />
                  </el-table>
                  <div class="pagination">
                    <Pagination
                      ref="pagination"
                      :list_total="Number(costList.total)"
                      @size-change="getOrFeeProjectList"
                      @current-change="getOrFeeProjectList"
                    />
                  </div>
                </el-collapse-item>
              </div>
              <div class="content_inner" v-if="spareAuthoriObj?.enableAuthori">
                <el-collapse-item name="c">
                  <template #title>
                    <div>
                      <el-icon v-if="activeTabs.includes('c')"> <CaretBottom /> </el-icon
                      ><el-icon v-else>
                        <CaretRight />
                      </el-icon>
                      <span>工单配件</span>
                    </div>
                  </template>
                  <!-- <button class="btn btn-bg2 mb10 " @click="partsDialogAdd = true" v-if="showAddServiceFeeWidthSpare">
                  <span class="iconfont icon-xinjian mr5"></span>
                  申请配件
                </button> -->
                  <el-table
                    :border="true"
                    resizable
                    max-height="22vh"
                    :data="ProSpareList.rows"
                    stripe
                    style="width: 100%"
                    :header-cell-style="tableHeaderCellStyle"
                  >
                    <!-- <template #empty>
                      <el-empty description="暂无数据" :image-size="40" />
                    </template> -->
                    <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
                      <template v-slot="i">
                        {{ i.$index + 1 }}
                      </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="100" fixed="left">
                      <template v-slot="item">
                        <div class="ord_dis">
                          <span class="waiting_x" v-if="item.row.status == 1" @click="viewCheck2(item.row)">审核</span>
                          <span class="waiting_pass" v-else>审核</span>
                        </div>
                      </template>
                    </el-table-column> -->
                    <el-table-column
                      show-overflow-tooltip
                      fixed="left"
                      prop="code"
                      label="配件单号"
                      min-width="170"
                    >
                      <!-- <template #default="scope">
                        <span class="number" @click="viewPartsDetail(scope.row.id)">{{ scope.row.code }}</span>
                      </template> -->
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="83">
                      <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
                        <el-tag v-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="warning" v-if="scope.row.status == 3">已驳回</el-tag>
                        <el-tag type="info" v-if="scope.row.status == 4">已撒回</el-tag>
                        <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="type" label="申请类型" width="100">
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="model"
                      label="配件名称"
                      width="200"
                    >
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="旧件处理方式" width="100">
                      <template v-slot="i">
                        {{
                          i.row.oldCopeWay == 1 ? '废弃' : i.row.oldCopeWay == 2 ? '旧件退回' : ''
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="receiveFactoryTotalPrice"
                      label="商家承担费用"
                      width="100"
                    >
                      <template v-slot="i">
                        ￥{{ (i.row.receiveFactoryTotalPrice || 0).toFixed(2) }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="applyEmp"
                      label="申请人员"
                      width="120"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="reviewEmp"
                      label="审核人员"
                      width="120"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="network"
                      label="申请服务商"
                      width="150"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="createTime"
                      label="申请时间"
                      width="150"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="reviewTime"
                      label="	审核时间"
                      width="150"
                    />
                  </el-table>
                  <div class="pagination">
                    <Pagination
                      ref="paginationPro"
                      :list_total="Number(ProSpareList.total)"
                      @size-change="getOrderWorkSpareList"
                      @current-change="getOrderWorkSpareList"
                    />
                  </div>
                </el-collapse-item>
              </div>
              <div class="content_inner">
                <el-collapse-item name="d">
                  <template #title>
                    <div>
                      <el-icon v-if="activeTabs.includes('d')"> <CaretBottom /> </el-icon
                      ><el-icon v-else>
                        <CaretRight />
                      </el-icon>
                      <span>应付费用</span>
                    </div>
                  </template>
                  <el-table resizable max-height="22vh" :data="feeObj" stripe>
                    <el-table-column
                      prop="settlementPrice"
                      show-overflow-tooltip
                      label="商家结算价"
                      min-width="100"
                    >
                      <template v-slot="i">
                        ￥{{ (i.row.settlementPrice || 0).toFixed(2) }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="serviceFee"
                      show-overflow-tooltip
                      label="服务费用"
                      min-width="100"
                    >
                      <template v-slot="i"> ￥{{ (i.row.serviceFee || 0).toFixed(2) }} </template>
                    </el-table-column>
                    <el-table-column
                      prop="spareFee"
                      show-overflow-tooltip
                      label="配件费用"
                      min-width="100"
                    >
                      <template v-slot="i"> ￥{{ (i.row.spareFee || 0).toFixed(2) }} </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="合计" min-width="120">
                      <template v-slot="i">
                        <span style="color: red"
                          >￥{{
                            (
                              Number(i.row.spareFee || 0) +
                              Number(i.row.settlementPrice || 0) +
                              Number(i.row.serviceFee || 0)
                            ).toFixed(2)
                          }}</span
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </div>
            </el-collapse>
          </div>
        </div>
        <div class="show_hide">
          <el-tooltip content="收起" placement="left" v-if="spanSix == 0">
            <span class="show_btn_r" @click="onShow(6)">
              <el-icon>
                <DArrowRight />
              </el-icon>
            </span>
          </el-tooltip>
          <el-tooltip content="展开" placement="left" v-else>
            <span class="show_btn_l" @click="onShow(0)">
              <el-icon>
                <DArrowLeft />
              </el-icon>
            </span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="6 - spanSix" v-if="spanSix == 0" class="right_side">
        <OperationLog :workId="$route.params.id" ref="OperationLogRef"></OperationLog>
        <!-- <el-tabs v-model="activeName">
            <el-tab-pane label="工单信息" name="first">
              <OrderInfo ref="OrderInfoRef" v-if="activeName == 'first'" :workId="$route.params.id"></OrderInfo>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="second">
              <OperationLog  v-if="activeName == 'second'" :workId="$route.params.id"></OperationLog>
            </el-tab-pane>
            <el-tab-pane label="留言" name="three">
              <LeaveMessage v-if="activeName == 'three'" :workId="$route.params.id"></LeaveMessage>
            </el-tab-pane>
            <el-tab-pane label="催单" name="fourth">
              <ReminderList v-if="activeName == 'fourth'" :workId="$route.params.id"></ReminderList>
            </el-tab-pane>
          </el-tabs> -->
      </el-col>
    </el-row>
    <!-- 客户关联档案表弹窗 -->
    <div>
      <el-drawer v-model="customerDrawer" title="客户关联档案表" show-close size="50%">
        <div v-loading="UserLoading" element-loading-text="加载中...">
          <el-form
            v-if="UserRelationInfoDetail"
            label-width="auto"
            label-position="top"
            :model="UserRelationInfoDetail"
            class="basic_information"
          >
            <el-row>
              <el-col :lg="4" :sm="8">
                <el-form-item label="客户名称">
                  <span class="ml" style="color: #007cff" @click="customerClickShow">{{
                    UserRelationInfoDetail.userName
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :sm="8">
                <el-form-item label="联系人电话">
                  <span class="ml">{{ UserRelationInfoDetail.userPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :sm="8">
                <el-form-item label="关联工单量">
                  <span class="ml">{{ UserRelationInfoDetail.orderQty }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :sm="8">
                <el-form-item label="关联商品量">
                  <span class="ml">{{ UserRelationInfoDetail.goodsQty }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :sm="8">
                <el-form-item label="创建时间">
                  <span class="ml">{{ UserRelationInfoDetail.userCreateTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :sm="8">
                <el-form-item label="客户编码">
                  <span class="ml">{{ UserRelationInfoDetail.userCode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs v-model="activeUserName">
            <!-- 关联商品 -->
            <el-tab-pane :label="`关联商品（${UserRelationInfoDetail?.goodsQty}）`" name="first">
              <el-table
                :border="true"
                :data="UserRelationCodeGoodsList.rows"
                resizable
                stripe
                height="70vh"
                style="width: 100%"
                :header-cell-style="tableHeaderCellStyle"
              >
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <el-table-column label="序号" width="50">
                  <template v-slot="i">
                    <div>
                      {{ i.$index + 1 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="商品信息">
                  <template v-slot="i">
                    {{ i.row.goodsBrand }}&nbsp;{{ i.row.goodsName }}&nbsp;{{
                      i.row.goodsModel
                    }}&nbsp;{{ i.row.goodsSpecName }}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                  <template #default="scope">
                    <el-tag v-if="scope.row.status !== 2" type="info">禁用</el-tag>
                    <el-tag v-else type="success">启用</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="code" show-overflow-tooltip label="商品编码" width="180" />
                <el-table-column
                  prop="registerTime"
                  show-overflow-tooltip
                  label="登记时间"
                  width="150"
                />
              </el-table>
              <div class="pagination">
                <Pagination
                  ref="paginationGoods"
                  :list_total="Number(UserRelationCodeGoodsList?.total || 0)"
                  @size-change="getUserRelationCodeGoodsListFun"
                  @current-change="getUserRelationCodeGoodsListFun"
                />
              </div>
            </el-tab-pane>
            <!-- 关联工单 -->
            <el-tab-pane :label="`关联工单（${UserRelationInfoDetail?.orderQty}）`" name="second">
              <el-table
                :border="true"
                :data="UserRelationOrderList.rows"
                resizable
                stripe
                height="70vh"
                style="width: 100%"
                :header-cell-style="tableHeaderCellStyle"
              >
                <template #empty>
                  <el-empty description="暂无数据" />
                </template>
                <el-table-column label="序号" width="50">
                  <template v-slot="item">
                    <span> {{ item.$index + 1 }} </span>
                  </template>
                </el-table-column>
                <el-table-column prop="workNo" show-overflow-tooltip label="工单编码" width="180" />
                <el-table-column show-overflow-tooltip prop="status" label="状态" width="120">
                  <template #default="scope">
                    <el-tag class="ml-2" type="warning" v-if="scope.row.status == 1"
                      >待客服确认</el-tag
                    >
                    <el-tag type="warning" v-if="scope.row.status == 2">待派单</el-tag>
                    <el-tag class="ml-2" type="warning" v-if="scope.row.status == 3"
                      >待服务商确认</el-tag
                    >
                    <el-tag class="ml-2" type="success" v-if="scope.row.status == 4">处理中</el-tag>
                    <el-tag v-if="scope.row.status == 5">已完成</el-tag>
                    <el-tag type="info" v-if="scope.row.status == 6">已取消</el-tag>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="商品信息">
                  <template v-slot="i">
                    {{ i.row.goodsBrand }}&nbsp;{{ i.row.goodsName }}&nbsp;{{
                      i.row.goodsModel
                    }}&nbsp;{{ i.row.goodsSpecName }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  show-overflow-tooltip
                  label="创建时间"
                  width="150"
                />
                <el-table-column
                  prop="endTime"
                  show-overflow-tooltip
                  label="完成时间"
                  width="150"
                />
              </el-table>
              <div class="pagination">
                <Pagination
                  ref="paginationOrder"
                  :list_total="Number(UserRelationOrderList?.total || 0)"
                  @size-change="getUserRelationOrderListFun"
                  @current-change="getUserRelationOrderListFun"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-drawer>
    </div>

    <!-- 商品信息弹窗-->
    <div class="pro_dra">
      <el-drawer v-model="productDrawer" title="商品信息" show-close>
        <el-form
          label-position="top"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px"
        >
          <el-form-item label="商品信息">
            <el-input
              readonly
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 16 }"
              :value="
                formLabelAlign.goodsBrand +
                '  &nbsp;  ' +
                formLabelAlign.goodsName +
                '  &nbsp;  ' +
                formLabelAlign.goodsModel +
                '  &nbsp;  ' +
                formLabelAlign.goodsSpec
              "
            />
          </el-form-item>
          <el-form-item label="商品数量" class="mt10">
            <el-input readonly :value="formLabelAlign.qty" />
          </el-form-item>
          <el-form-item label="购买时间" class="mt10">
            <el-input readonly :value="formLabelAlign.buyTime" />
          </el-form-item>
          <el-form-item label="质保到期" class="mt10">
            <el-input readonly :value="formLabelAlign.endTime" />
          </el-form-item>
          <el-form-item label="登记信息" class="mt10">
            <el-input
              :value="
                formLabelAlign.userName +
                ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' +
                formLabelAlign.userPhone +
                '\r\n' +
                formLabelAlign.province +
                '&nbsp;' +
                formLabelAlign.city +
                '&nbsp;' +
                formLabelAlign.area +
                '&nbsp;' +
                formLabelAlign.town +
                '&nbsp; ' +
                formLabelAlign.address
              "
              readonly
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 16 }"
            />
          </el-form-item>
          <el-form-item label="一物一码" class="mt10">
            <el-input
              :value="formLabelAlign.codes.join('；')"
              type="textarea"
              readonly
              :autosize="{ minRows: 1, maxRows: 16 }"
            />
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
    <!-- 填写备注弹窗 -->
    <!-- <el-drawer v-model="productDrawerRemark" title="填写备注" show-close size="360">
      <div class="remark_list">
        <RemarkList :workId="$route.params.id"></RemarkList>
      </div>
    </el-drawer> -->
    <!-- 文件查看 -->
    <el-dialog
      :title="`查看${file.type}`"
      v-model="dialogContract"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <iframe
        :src="`${file.file}`"
        width="100%"
        height="100%"
        style="height: 700px"
        frameborder="0"
      ></iframe>
    </el-dialog>
    <!-- 预约弹窗 -->
    <ReservationTime
      :timeDialog="timeDialog"
      @time-dialog="timeDialog = false"
      :workId="$route.params.id"
    >
    </ReservationTime>

    <!--1分配客服 2分配服务商 3完成 4取消  -->
    <AssignDialog
      :assignAny="assignAny"
      v-if="orderDetail"
      :assignDialog="assignDialog"
      :networkId="orderDetail?.networkId"
      :network="orderDetail?.network"
      :selecttion="[$route.params.id]"
      @assign-dialog="assignDialog = false"
      :isbatch="false"
      @update-list="refreshOrderList()"
    >
    </AssignDialog>

    <!-- 费用审核弹出框 -->
    <CheckCost
      v-if="checkDialog"
      :feeNo="feeNo"
      :workNo="workNo"
      :checkDialog="checkDialog"
      :feeId="feeId"
      @assign-dialog="checkDialog = false"
      @update-list="getOrFeeProjectList()"
    ></CheckCost>
    <!-- 添加 -->
    <AddCost
      v-if="checkDialogAdd"
      :checkDialog="checkDialogAdd"
      :workId="$route.params.id"
      @assign-dialog="checkDialogAdd = false"
      @update-list="getOrFeeProjectList()"
    ></AddCost>
    <!-- 查看详细弹出框 -->
    <CostDetail
      v-if="detailDialog"
      :feeId="feeId"
      :checkDialog="detailDialog"
      @assign-dialog="detailDialog = false"
    >
    </CostDetail>
    <!-- 新增费用配件弹窗 -->
    <AddParts
      :checkDialog="partsDialogAdd"
      v-if="partsDialogAdd"
      :workId="$route.params.id"
      @assign-dialog="partsDialogAdd = false"
      @update-list="getOrderWorkSpareList()"
    ></AddParts>
    <CheckParts
      v-if="partDialog"
      :workId="$route.params.id"
      :checkDialog="partDialog"
      :partsId="partsId"
      @assign-dialog="partDialog = false"
      @update-list="getOrderWorkSpareList()"
    ></CheckParts>
    <!-- 查看详细弹出框 -->
    <PartsDetail
      v-if="detailPartsDialog"
      :partsId="partsId"
      :checkDialog="detailPartsDialog"
      @assign-dialog="detailPartsDialog = false"
    >
    </PartsDetail>
    <!-- 服务过程 -->
    <el-drawer
      v-model="productDrawerRemark"
      destroy-on-close
      :open-delay="100"
      direction="rtl"
      show-close
      size="420"
    >
      <template #header>
        <div style="display: flex; gap: 8px; align-items: center; font-size: 14px; color: #303133">
          工单编号:{{ orderDetail?.workNo }}
          <el-icon
            size="16"
            style="cursor: pointer"
            @click="LeaveMessageRef.getList()"
            title="刷新"
          >
            <Refresh />
          </el-icon>
        </div>
      </template>
      <div class="remark_list" v-if="productDrawerRemark" style="width: 100%">
        <LeaveMessage
          :workNo="orderDetail?.workNo"
          :workId="$route.params.id"
          ref="LeaveMessageRef"
        ></LeaveMessage>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import { tableHeaderCellStyle } from '../../../../utils/tools'
  import LeaveMessage from './components/leaveMessage.vue'
  import {
    getOrderDetail,
    getOrderGoodsDetail,
    getPaymentFee,
    getOrderDetailFeeProjectList,
    getOrderDetailWorkSpareList,
    getFeeAuthori,
    getSpareAuthori,
  } from './../../../../api/order'
  import {
    getUserRelationInfo,
    getUserRelationOrderList,
    getUserRelationCodeGoodsList,
  } from './../../../../api/users'
  import { ElMessage } from 'element-plus'
  import Pagination from './../../../../components/Pagination/index.vue'
  import ReservationTime from './components/ReservationTime.vue'
  import OperationLog from './components/OperationLog.vue'
  import AssignDialog from '../components/AssignDialog.vue'
  import pdf from '@/assets/image/pdf.png'
  import CheckCost from '../../ocost/components/CheckCost.vue'
  import AddCost from './components/AddCost.vue'
  import CostDetail from '../../ocost/components/CostDetail.vue'
  import AddParts from './components/AddParts.vue'
  import CheckParts from '../../parts/components/CheckParts.vue'
  import PartsDetail from '../../parts/components/PartsDetail.vue'
  import OrderSettleInfo from '@/components/pages/order/detail/settle-info/SettleInfo.vue'

  const route = useRoute()
  const spanSix = ref(0)
  const LeaveMessageRef = ref()
  // 工单来源
  const sources = ref([
    { title: '平台系统报单', value: 1 },
    { title: '扫码报单', value: 2 },
    { title: '小程序报单', value: 3 },
    { title: 'APP报单', value: 4 },
    { title: 'Excel导入报单', value: 5 },
    { title: '品牌商家建单', value: 6 },
    { title: '平台代商家报单', value: 7 },
    { title: '品牌商家Excel导入', value: 8 },
    { title: '乐开伙伴云', value: 9 }
  ])
  const orderDetail = ref(null) //工单详情
  const serviceDetail = ref(null) //服务商详情
  const showAddServiceFeeWidthSpare = ref(false) // 是否显示申请服务项目与工单配件
  const loading = ref(false)
  const pagination = ref()
  const paginationOrder = ref()
  const paginationGoods = ref()
  // 产品信息弹窗
  const productDrawer = ref(false)
  // 产品信息 弹窗数据
  const formLabelAlign = ref(null)
  // 弹窗显示
  const assignDialog = ref(false) //分派
  const customerDrawer = ref(false) //客户关联档案弹窗
  const assignAny = ref(null) //分派1 2 3 4
  //  工单信息“first”  操作日志'second'
  // const activeName = ref('first')
  const activeUserName = ref('first') //客户关联
  const OrderInfoRef = ref() // 工单信息对象的Ref

  const timeDialog = ref(false) //预约时间弹窗
  const checkDialog = ref(false) //审核弹窗
  const checkDialogAdd = ref(false) //添加弹窗
  const partsDialogAdd = ref(false) //添加配件
  const partDialog = ref(false) //审核配件
  const feeId = ref('')
  const partsId = ref('')
  const workNo = ref('')
  const feeNo = ref('')
  const detailDialog = ref(false)
  const detailPartsDialog = ref(false)
  const UserRelationInfoDetail = ref(null) //客户工单商品信息
  const activeTabs = ref(['a', 'b', 'c', 'd'])
  // 查看图片
  const file = ref({ file: null, type: '' }) //文件
  const dialogContract = ref(false) //文件查看弹窗

  // 工单结单信息组件实例
  const orderSettleInfoInstance = ref<InstanceType<typeof OrderSettleInfo> | null>(null)

  /**
   * 获取工单结单信息
   */
  const getOrderSettleInfo = () => {
    nextTick(() => {
      console.log(orderSettleInfoInstance.value)
      if (orderSettleInfoInstance.value) {
        orderSettleInfoInstance.value.getOrderSettleInfo(route.params.id as string)
      }
    })
  }

  const lookFile = (val, type) => {
    if (type == '附件') {
      pdfLook(val)
      return
    }
    file.value = { file: val, type: type }
    dialogContract.value = true
  }
  function pdfLook(url) {
    // 创建一个新的a标签元素
    var a = document.createElement('a')
    a.href = url
    a.target = '_blank'
    a.style.display = 'none' // 隐藏a标签
    // 触发点击事件开始下载
    document.body.appendChild(a) // 必须添加到DOM中才能触发点击
    a.click()
    document.body.removeChild(a) // 下载完成后移除元素
  }
  //填写备注弹窗
  const productDrawerRemark = ref(false)
  const OperationLogRef = ref()
  // 刷新工单详情方法
  const refreshOrderList = () => {
    OrderInfoRef.value?.getDetail()
    getOrderDetailData() // 获取详情
    getOrderGoodsDetailList() //获取工单详情商品
    // getServiceInfoDetail()//获取服务商详情
    OperationLogRef.value.getList()
  }
  // 查看费用详细
  const viewDetail = (n: string) => {
    detailDialog.value = true
    feeId.value = n
  }
  // 查看配件详细
  const viewPartsDetail = (n: string) => {
    detailPartsDialog.value = true
    partsId.value = n
  }
  // 填写备注弹窗
  const showRemark = () => {
    productDrawerRemark.value = true
  }
  // 打开客户档案表
  const customerClickShow = () => {
    customerDrawer.value = true
    getUserRelationInfoDetail() //根据工单ID获取客户关联信息
  }
  // 费用审核
  const viewCheck = (n: { id: string; feeNo: any }) => {
    feeId.value = JSON.parse(JSON.stringify(n.id))
    feeNo.value = n.feeNo
    checkDialog.value = true
  }
  // 配件审核
  const viewCheck2 = (n: { id: string; feeNo: any }) => {
    partsId.value = JSON.parse(JSON.stringify(n.id))
    partDialog.value = true
  }
  // 展示弹窗
  const showDrawer = (val: any) => {
    productDrawer.value = true
    formLabelAlign.value = val
  }
  const costList = ref({ rows: [], total: 0 }) //费用项目
  // 获取费用项目列表
  const getOrFeeProjectList = async () => {
    let data = {
      limit: pagination.value.pageSize,
      page: pagination.value.current,
    }
    await getOrderDetailFeeProjectList(data, route.params.id).then((res) => {
      costList.value = res.data.data
    })
  }
  // 应付费用
  const feeObj = ref([])
  const getPaymentFeeObj = () => {
    getPaymentFee(route.params.id).then((res) => {
      feeObj.value = [res.data.data.row]
    })
  }
  // 配件
  const paginationPro = ref()
  const ProSpareList = ref({ rows: [], total: 0 })
  const getOrderWorkSpareList = async () => {
    let data = {
      limit: paginationPro.value.pageSize,
      page: paginationPro.value.current,
    }
    await getOrderDetailWorkSpareList(data, route.params.id).then((res) => {
      ProSpareList.value = res.data.data
    })
  }
  const onShow = (val: number) => {
    spanSix.value = val
  }
  // 3-完成工单 4-取消工单 5-催单
  const assignHandel = (n: number) => {
    assignAny.value = n
    assignDialog.value = true
  }
  // 获取商家工单费用权限
  const feeAuthoriObj = ref()
  const getFeeAuthoriObj = () => {
    getFeeAuthori().then((res) => {
      if (res.data.success) {
        feeAuthoriObj.value = res.data.data.row
      }
    })
  }
  // 获取商家工单配件权限
  const spareAuthoriObj = ref()
  const getSpareAuthoriObj = () => {
    getSpareAuthori().then((res) => {
      if (res.data.success) {
        spareAuthoriObj.value = res.data.data.row
      }
    })
  }
  // 获取详情
  const imgFielVo = ref([]) //o.type == 5 || o.type == 6 || o.type == 7
  const UnimgFielVo = ref([]) //
  const getOrderDetailData = async () => {
    showAddServiceFeeWidthSpare.value = false
    loading.value = true
    await getOrderDetail(route.params.id).then((res) => {
      loading.value = false
      if (res.data.success) {
        orderDetail.value = res.data.data.row
        workNo.value = res.data.data.row.orderNo
        showAddServiceFeeWidthSpare.value = orderDetail.value.status === 3
        if (orderDetail.value.orderCustomFields.length > 0) {
          let arr = []
          orderDetail.value.orderCustomFields.map((o) => {
            if (o.type == 5 || o.type == 6 || o.type == 7) {
              arr.push(o)
            } else {
              arr.unshift(o)
            }
          })
          orderDetail.value.orderCustomFields = arr
          imgFielVo.value = arr.filter((o) => o.type == 5 || o.type == 6 || o.type == 7)
          UnimgFielVo.value = arr.filter((o) => !(o.type == 5 || o.type == 6 || o.type == 7))
        }
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
    })
  }
  const goodsList = ref({ rows: [], total: 0 }) //商品列表
  const pagination_goods = ref()
  // 获取工单详情商品
  const getOrderGoodsDetailList = async () => {
    if (route.params.id) {
      let data = {
        limit: pagination_goods.value.pageSize,
        page: pagination_goods.value.current,
      }
      await getOrderGoodsDetail(data, route.params.id).then((res) => {
        goodsList.value = res.data.data
      })
    }
  }
  // // 服务商详情
  // const getServiceInfoDetail = async () => {
  //   loading.value = true
  //   if (route.params.id) {
  //     await getServiceInfo(route.params.id).then(res => {
  //       if (res.data.success) {
  //         serviceDetail.value = res.data.data.row
  //       } else {
  //         ElMessage({
  //           showClose: true,
  //           message: res.data.message,
  //           type: 'error',
  //           duration: 4000
  //         })
  //       }
  //     })
  //   }
  //   loading.value = false
  // }
  // 根据工单ID获取客户关联信息
  const UserLoading = ref(false)
  const getUserRelationInfoDetail = async () => {
    if (route.params.id) {
      UserLoading.value = true
      await getUserRelationInfo(route.params.id).then((res) => {
        if (res.data.success) {
          UserRelationInfoDetail.value = res.data.data.row
          getUserRelationCodeGoodsListFun()
        } else {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 4000,
          })
        }
      })
      UserLoading.value = false
    }
  }
  // 获取客户关联商品列表
  const UserRelationCodeGoodsList = ref({ rows: [], total: 0 })
  const getUserRelationCodeGoodsListFun = async () => {
    let data = {
      limit: paginationGoods.value.pageSize,
      page: paginationGoods.value.current,
    }
    UserLoading.value = true
    await getUserRelationCodeGoodsList(data, UserRelationInfoDetail.value.userId).then((res) => {
      if (res.data.success) {
        UserRelationCodeGoodsList.value = res.data.data
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
    })
    UserLoading.value = false
  }
  // 获取客户关联工单列表
  const UserRelationOrderList = ref({ rows: [], total: 0 })
  const getUserRelationOrderListFun = async () => {
    let data = {
      limit: paginationOrder.value.pageSize,
      page: paginationOrder.value.current,
    }
    UserLoading.value = true
    await getUserRelationOrderList(data, UserRelationInfoDetail.value.userId).then((res) => {
      if (res.data.success) {
        UserRelationOrderList.value = res.data.data
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
    })
    UserLoading.value = false
  }
  // 监听客户
  watch(activeUserName, (n) => {
    switch (n) {
      case 'first':
        getUserRelationCodeGoodsListFun()
        break

      case 'second':
        getUserRelationOrderListFun()
        break
    }
  })

  onMounted(async () => {
    Promise.all([
      getOrderDetailData(),
      getOrderGoodsDetailList(),
      getPaymentFeeObj(),
      getFeeAuthoriObj(),
      getSpareAuthoriObj(),
    ]).then(() => {
      setTimeout(() => {
        if (spareAuthoriObj.value.enableAuthori) {
          getOrderWorkSpareList()
        }
        if (feeAuthoriObj.value.enableAuthori) {
          getOrFeeProjectList()
        }
      }, 50)
    })
    getOrderSettleInfo()
    // getOrderDetailData()// 获取详情
    // getOrderGoodsDetailList() //获取工单详情商品
    // getServiceInfoDetail()//获取服务商详情
  })
</script>

<style lang="scss" scoped>
  @import './index';
</style>
